<template>
  <div id="roles">
    <div class="row wrapper border-bottom white-bg page-heading m-b-md">
      <div class="col-lg-10">
        <h2>角色&权限配置</h2>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox-title page-content-header">
                        <h5>角色列表</h5>
                        <div class="ibox-tools m-t-n-xs" @click="handleAdd">
                            <a class="btn btn-xxs btn-danger"> 新增角色 </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox-content edit-table clearfix">
                        
                        <el-table class="no-border" stripe :data="tableData" style="width: 100%">
                            <el-table-column  label="角色名">
                              <template slot-scope="scope">
                                <el-input  v-model="scope.row.roleName" :disabled="!scope.row.editable" placeholder=""></el-input>
                              </template>
                            </el-table-column>
                            
                            <el-table-column label="角色类型" prop='roleType'>
                                <template slot-scope="scope">
                                  
                                 <select class="form-control " name="roleType" :disabled="!scope.row.editable"  v-model="scope.row.roleType">
                                    <option value="">--</option>
                                    <option v-for="(item , index) in roleType" :value="item.labelValue" :key="index">{{item.labelName}}</option>
                                  </select>
                                
                              </template>
                             
                            </el-table-column>
                            <el-table-column prop="designerName" label="角色描述">
                               <template slot-scope="scope">
                                <el-input  v-model="scope.row.roleDescription" :disabled="!scope.row.editable" placeholder="">{{scope.row.roleDescription}}</el-input>
                              </template>
                            </el-table-column>
                            
                            <el-table-column prop="username" label="" width="180">
                                <template slot-scope="scope">
                                    <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                      <div class="btn btn-white btn-xxs" @click='addNewAuth(scope.row)' :class="['btn btn-white btn-xxs', scope.row.editable ? 'hide':'']">
                                        <a href="#" > 分配权限 </a>
                                      </div>
                                      <div :class="['btn btn-white btn-xxs', scope.row.editable ? 'hide':'']" @click="handleEdit(scope.row)">
                                        <a href="#"> 编辑 </a>
                                      </div>
                                      <div :class="['btn btn-white btn-xxs save-tr', scope.row.editable ? '':'hide']" @click="handleSave(scope.row)">
                                        <a href="#"> 保存 </a>
                                      </div>
                                      <div :class="['btn btn-white btn-xxs cancel-tr' , scope.row.editable ? '':'hide']" @click="handleCancel(scope.row)">
                                        <a href="#"> 取消 </a>
                                      </div>
                                      <div :class="['btn btn-white btn-xxs cancel-tr' , scope.row.editable ? 'hide':'']" @click="handleDelete(scope.row)">
                                        <a href="#"> 删除 </a>
                                      </div>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                       <!--  <div class="pagination">
                            <el-pagination background layout="prev, pager, next" :current-page.sync="pagination.currentPage" :page-size="pagination.size" :total="pagination.total" @current-change="">
                            </el-pagination>
                        </div> -->
                    </div>
                </div>
            </div>  
    
  </div>   
  </div>

</template>

<script>
  import _ from "lodash";
import { Role, Basic } from "@/assets/js/api";
export default {
  name: "ststem_roles",
  data: function() {
    return {
      tableData: [],
     
      pagination: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      addRole:[],
     
      edit: {
        state: false,
        data: {},
      },
      roleType:[]
    };
  },
  mounted: function() {
    this.getTableData(1);
    this.getinitData();
  },

  methods: {
    getinitData(){
      Basic.getCode({ type: "CS0088" }).then(response=>{
        this.roleType = response.data;
      })
    },
    getTableData(pageNo) {
      let _this = this;
      let params = new FormData();
      params.append('pageNum',pageNo);
      params.append('clientId','batfront');
      params.append('pageSize', _this.pagination.size);
      let callback = function() {
        Role.getRoleList(params).then(response => {
          if (response && response.data && response.data.length > 0) {
            _this.tableData = response.data.map(item => {
              return _this.filterTableRow(item,"saved");
            });
            console.log(_this.tableData)
            _this.pagination.currentPage = pageNo;
            _this.pagination.total = response.meta.total;
          }
        });
      };

      if (!this.edit.state) {
        callback();
      } else {
        this.handleHasEditRow(callback);
      }
     
    },
    filterTableRow(item,dataType) {
      return {
        id: item.roleId ? item.roleId : "",
        roleName: item.roleName ? item.roleName : "", 
        dataType: dataType,
        roleType:item.roleType ? item.roleType : "", 
        roleDescription:item.roleDescription ? item.roleDescription :"" ,
        designerName:item.designerName ? item.designerName : "",  
        editable: false
      };
    },
     handleHasEditRow(callback) {
      this.$confirm("是否放弃修改的数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "confirmButtonClass"
      })  
        .then(() => {
          let editRow = this.tableData.filter(item => item.editable)[0];
          this.handleCancel(editRow);
          callback();
        })
        .catch(() => {});
    },
    handleEdit: _.debounce(function(data) {
      let _this = this;
      console.log(data)
      let callback = function() {
        let obj = {
          roleName: data.roleName,
          creatTime: data.creatTime,
          designerName:data.designerName,
          roleDescription:data.roleDescription,
          roleType:data.roleType
        };
        _this.edit.state = true;
        _this.edit.data = Object.assign({}, obj);

        data.editable = true;
      };

      if (!this.edit.state) {

        callback();
      } else {

        this.handleHasEditRow(callback);
      }
    }, 500),
    handleCancel(data) {
       this.$confirm("确认放弃修改吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "confirmButtonClass"
      })
        .then(() => {
          this.handleCancelRow(data);
        })
        .catch(() => {});
      console.log(this.edit.data)
      
      // this.edit.data = {};
      // this.tableData = this.tableData.filter(item => {
      //   return item.dataType === "saved";
      // });
    },
    handleCancelRow(data){
      data.editable = false;
      data.roleType = this.edit.data.roleType;
      data.roleDescription = this.edit.data.roleDescription;
      data.roleName = this.edit.data.roleName;

      this.edit.state = false;
      this.edit.data = {};
      this.tableData = this.tableData.filter(item => {
        return item.dataType === "saved";
      });
    },
    handleSave: _.debounce(function(data) {
      console.log(data)
      if(data.dataType=="new"){
        let params = {
          roleName: data.roleName?  data.roleName:null,
          roleType: data.roleType ? data.roleType:null,
          roleDescription: data.roleDescription ? data.roleDescription : null,
          roleId:data.id ? data.id:null,
          clientId:'batfront'
        }
      
        Role.editUser(params).then(response => {
          if (response && response.data) {
            data.editable = false;
            this.edit.state = false;
            data.id = response.data.id;
            this.$alert("保存成功", "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmButtonClass"
            });
            this.getTableData(1);
          }
        })
      }else if(data.dataType=="saved"){
        let params = {
          roleName: data.roleName?  data.roleName:null,
          roleType: data.roleType ? data.roleType:null,
          roleDescription: data.roleDescription ? data.roleDescription : null,
          roleId:data.id ? data.id:null,
          clientId:'batfront'
        }
        Role.editUser(params).then(response => {
          if (response && response.data) {
            data.editable = false;
            this.edit.state = false;
            this.$alert("保存成功", "提示", {
              confirmButtonText: "确定",
              confirmButtonClass: "confirmButtonClass"
            });
          }
        });
      }
    }, 500),
    handleDelete: _.debounce(function(data) {
      let _this = this;
       _this.$confirm(`确认删除${data.roleName}吗?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            confirmButtonClass: "confirmButtonClass"
          })
          .then(() => {
            Role.deleteUser({ roleId: data.id })
              .then(response => {
                if (response && response.data) {
                  _this.$alert("删除成功", "提示", {
                    confirmButtonText: "确定",
                    confirmButtonClass: "confirmButtonClass",
                    callback: action => {
                      _this.getTableData({
                        pageNo: _this.pagination.currentPage
                      });
                    }
                  });
                }
              })
              .catch(() => {});
          })
          .catch(() => {});

      if (!this.edit.state) {
        callback();
      } else {
        this.handleHasEditRow(callback);
      }
    }, 500),
    handleAdd(data) {
     let _this = this
      let callback = function() {
         var row = _this.filterTableRow({}, "new");
        _this.edit.state = true;
        row.editable = true;
        var _data = [row];
        _this.tableData = _data.concat(_this.tableData);
      };
       if (!this.edit.state) {
        callback();
      } else {
        this.handleHasEditRow(callback);
      }
    },
    sureAddRole(data) {
      data.addLabel.showAddLabel = false;
      data.roleList.push({
        categoryName: data.addLabel.newRole,
        categoryValue: "03",
        menus: []
      });
      data.addLabel.newRole = "";
    },
    cancelAddRole(data) {
      data.addLabel.showAddLabel = false;
    },
    handleChangeSelectedRole() {
      //this.tableData.filter(d => d.categoryValue === data.categoryValue)
    },
    addNewAuth(data) {
      console.log(data.id)
      let params ={
        roleId:data.id
      }
      Role.getAuthList(params).then(response=>{
        console.log(response.data)
      })
       this.$router.push({ path: "/home/roleDetail",query:{roleId:data.id,system:"batfront"} });
    }
  }
};
</script>

<style>
.role-content {
  width: 200px;
}

.role-content .ibox-title h5 {
  font-size: 16px;
}

.role-content .role-list .role-title {
  background-color: #e7eaec;
  padding: 6px 10px;
}

.role-content .role-list {
  border: solid 1px #e5e6e7;
}

.role-subList {
  padding-top: 17px;
  padding-left: 31px;
  min-height: 143px;
}
.role-content .role-footor {
  padding-top: 7px;
  padding-bottom: 7px;
}

.new_role.form-control {
  width: 112px;
  margin: 0 auto;
  height: 30px;
  display: inline-block;
}

.role-content .role-close {
  font-size: 19px;
  font-weight: bold;
  margin-top: -2px;
  display: inline-block;
  vertical-align: middle;
}
.hasAction:hover {
  color: #fe5d3c;
  cursor: pointer;
}

.role-menu-list {
  padding: 18px 16px 18px 22px;
}

.role-menu-list .table {
  margin-bottom: 0;
}

.role-menu-list .table input[type="checkbox"] {
  vertical-align: middle;
}

.role-menu-list .table > thead > tr > th,
.role-menu-list .table > tbody > tr > td {
  border-bottom: 0px;
  border-top: 0px;
}

.role-menu-list .table > thead > tr > th {
  height: 30px;
  line-height: 30px;
}

.role-menu-list .table > tbody > tr > td {
  height: 25px;
  line-height: 25px;
}
</style>
